<template>
	<view style="display: flex;flex-direction: column;justify-content: center;align-items: center;">
		<!-- 标题 -->
		<text style="width: 702rpx; font-size: 34rpx;color: #333333;margin-top: 40rpx;">{{ context.post_title }}</text>

		<!-- 日期和浏览量 -->
		<view style="width: 702rpx; display: flex;justify-content: space-between;margin-top: 30rpx;">
			<!-- 日期 -->
			<text style="font-size: 22rpx;color: #666666;">{{ context.published_time }}</text>
			<!-- 浏览量 -->
			<view style="display: flex;justify-content: center;align-items: center;">
				<image mode="aspectFill" src="../static/jiaolian_tuandui.png" style="width: 17rpx;height: 12rpx;margin-right: 10rpx;"></image>
				<text style="font-size: 18rpx;color: #666666;">{{ context.post_hits }}</text>
			</view>
		</view>

		<view style="width: 702rpx; display: flex;justify-content: space-between;margin-top: 30rpx;" v-if="context.video">
			<video :src="context.video"  loop :danmu-list="danmuList" :show-fullscreen-btn="false" style="width: 100%;"></video>
		</view>
		<!-- 富文本 -->
		<rich-text :nodes="context.wonderful_moment" style="width: 702rpx; margin-top: 35rpx;"></rich-text>
	</view>
</template>

<script>
export default {
	data() {
		return {
			/**
			 * id	文章id
			 * post_title	文章标题
			 * published_time	发布时间
			 * thumbnail	缩略图
			 * wonderful_moment	详情内容
			 * post_hits	查看数
			 * post_source	作者
			 * post_excerpt	摘要
			 */
			context: {
				id: '',
				post_title: '',
				published_time: '',
				thumbnail: '',
				wonderful_moment: '',
				post_excerpt: '',
				post_hits: '',
				post_source: '',
			},
		};
	},
	onLoad() {
		this.getContext(this.$Route.query.articleId);
	},
	methods: {
		// 获取文章数据
		async getContext(articleId) {
			let res;
			try {
				res = await this.$request.get('/api/Home/info_detial', {
					data: {
						article_id: articleId,
					},
				});
			} catch (e) {
				//TODO handle the exception
				return uni.showToast({
					title: '网络连接失败！',
					icon: 'none',
				});
			}
			console.log('res111111', res);
			//if (!res.code) return uni.$showMsg(res.data.msg);
			this.context = res.data.data;

			this.context.wonderful_moment = res.data.data.wonderful_moment
				.replace(/<p([\s\w"=\/\.:;]+)((?:(style="[^"]+")))/gi, '<p')
				.replace(/<p>/gi, '<p style="font-size: 15px; line-height: 25px;">')
				.replace(/<img([\s\w"-=\/\.:;]+)((?:(height="[^"]+")))/gi, '<img$1')
				.replace(/<img([\s\w"-=\/\.:;]+)((?:(width="[^"]+")))/gi, '<img$1')
				.replace(/<img([\s\w"-=\/\.:;]+)((?:(style="[^"]+")))/gi, '<img$1')
				.replace(/<img([\s\w"-=\/\.:;]+)((?:(alt="[^"]+")))/gi, '<img$1')
				.replace(/<img([\s\w"-=\/\.:;]+)/gi, '<img style="width: 100%;" $1');
		},
	},
};
</script>

<style></style>
